<template>
    <div>
        <template>
            <div class="all">
                <div style="margin-left: 10px;">
                    <i class="el-icon-s-management"></i><span> 成绩录入</span>
                </div>
                <el-card>
                    <div class="header">
                        <div style="width: 350px; display: flex;">
                            <el-input placeholder="课程名" v-model='courseName'></el-input>
                            <el-input style="margin-left: 15px;" placeholder="学生名" v-model="studentName"></el-input>
                            <el-button style="margin-left: 15px;" type="primary" @click="search">搜索</el-button>
                        </div>
                    </div>
                    <el-pagination @current-change="handleCurrentChange" style="text-align: center;margin-top: 3px;"
                        :current-page.sync="page" :page-size="10" layout="prev, pager, next" :total="total">
                    </el-pagination>
                    <el-table :data="tableData" style="width: 100%;height: 80%;" v-loading="loading">
                        <el-table-column prop="studentCourseId" label="选课Id">
                        </el-table-column>
                        <el-table-column prop="courseName" label="课程名">
                        </el-table-column>
                        <el-table-column prop="studentName" label="学生姓名">
                        </el-table-column>
                        <el-table-column prop="dailyScore" label="日常分">
                        </el-table-column>
                        <el-table-column prop="examScore" label="笔试分">
                        </el-table-column>
                        <el-table-column prop="score" label="成绩">
                        </el-table-column>
                        <el-table-column prop="submit" label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" @click="submit(scope.row.studentCourseId)"
                                    size="small">修改</el-button>
                            </template>

                        </el-table-column>

                    </el-table>
                </el-card>
                <el-dialog title="编辑" :visible.sync="dialogFormVisible" :close-on-click-modal='false'>
                    <scoreeditView @close="closed" :key="dialogFormVisible" :id="id"></scoreeditView>
                </el-dialog>
            </div>
        </template>
    </div>
</template>

<script>
import { teachergradepage } from '@/api/teacher/search'
import { teachergradepagecount } from '@/api/teacher/search'
import scoreeditView from '@/components/teacher/scoreeditView.vue'
export default {
    components: {
        scoreeditView
    },
    data() {
        return {
            // 页数
            page: 1,
            // 数据表格
            tableData: [],
            // 名字
            loading: false,
            studentName: "",
            courseName: "",
            total: 0,
            dialogFormVisible: false,
            id: ""

        }
    },

    methods: {
        handleCurrentChange(val) {
            this.page = val
            this.getlist()
        },
        getpageCount() {
            let params = {
                courseName: this.courseName,
                studentName: this.studentName
            }
            teachergradepagecount(params).then(res => {
                this.total = res.data * 10

            })
        },
        search() {
            let params = {
                courseName: this.courseName,
                studentName: this.studentName
            }
            this.getlist()
        },
        submit(val) {
            this.id = val
            this.dialogFormVisible = true
        },
        getlist() {
           
            let params = {
                courseName: this.courseName,
                studentName: this.studentName
            }
             this.loading=true
            teachergradepage(params, this.page).then(res => {
                this.loading=false
                this.tableData = res.data
            })
        },
        closed() {
            this.dialogFormVisible = false
            this.getlist()
        }
    },
    mounted() {
        this.getlist()
        this.getpageCount()
    }
}
</script>

<style lang="scss" scoped>
.all {
    background-color: #ccc;
    height: 100%;
    width: 100%;

    .el-card {
        width: 98%;
        margin: 5px auto 0;

        .header {
            display: flex;
            justify-content: flex-end;
        }

    }
}
</style>